<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">待办事项</span>
      </div>
      <div class="content">
        <div class="marginBot">
          待办事项提醒处理
          <i class="el-icon-message-solid">
            <em>{{ num }}</em>
          </i>
        </div>
        <el-button round @click="openDialog">去处理</el-button>
      </div>
    </el-card>
    <todo ref="todoDialog" @get-Num="getNum" />
  </div>
</template>
<script>
import Todo from './Todo'
export default {
  name: 'TodoSum',
  components: {
    Todo

  },
  data() {
    return {
      num: ''
    }
  },
  mounted() {
    // this.getTodoTotal()
  },
  methods: {
    getNum(val) {
      this.num = val
    },
    getTodoTotal() {
      this.$refs.todoDialog.getList()
    },
    openDialog() {
      if (String(this.num) === '0') {
        this.$message.error('没有要处理的事项')
        return false
      }
      this.$refs.todoDialog.open()
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    margin: 0 !important;
  }
  .box-card .el-card__header{
    padding: 12px 20px;
    position: relative;
  }
  .box-card .title{
    color: #00A99D;
    padding-left: 12px;
    font-size: 16px;
    font-weight: bold;
  }
  .box-card .title::before{
    content: '';
    display: inline-block;
    position: absolute;
    margin:3px 0 0 -10px;
    border-radius: 2px;
    height: 20px;
    width: 5px;
    background: #00A99D;
  }
  .mb0.el-button--mini{
    margin-bottom: 0;
  }
  .content {
    height: 70px;
    box-sizing: border-box;
    position: relative;
    i {
      position: absolute;
      right: 0;
      color:#AD7BDF;
      font-size: 34px;
      em {
        display: inline-block;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #F45454;
        color:#fff;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        position: absolute;
        top: -8px;
        right: -8px;
      }
    }
  }
</style>
